<template>
	<!-- 汇报详情/通报详情页面 -->
	<div class="task">
		<Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
		<div class="taskContent">

			<div class="tableHeadAll">

				<div class="tableHeadAllTop">
					<div class="taskheadName">
						<div class="taskheadNameLeft"></div>
						<div class="taskheadNameRight">任务信息</div>
					</div>
					<div class="taskheadButton" v-if="!putaway" @click="putAway">收起</div>
					<div class="taskheadButton" v-if="putaway" @click="putAway">展开</div>
				</div>

				<div class="taskTitle" v-if="!putaway">
					<div class="taskTitleText">
						—— {{taskDetail.taskTitle}} ——
					</div>
				</div>

				<div class="tableHeadContent" v-if="!putaway">
					<div class="tableHead">
						<div class="tableHeadTime">
							<div>发布时间：2020-5-20 13:30</div>
							<div>|</div>
							<div>完成时间：2020-5-20 13:30</div>
						</div>
					</div>
					<div class="tableHeadText" v-if="!putaway">
						<div class="tableHeadTextContent">
							<el-input type="textarea" readonly="true" autosize :value="taskDetail.taskContent">
							</el-input>
						</div>
					</div>
				</div>
			</div>

			<div class="taskMid" v-if="!putaway">
				<div class="taskMidName">
					<div class="taskMidNameLeft"></div>
					<div class="taskMidNameRight">情况通报附件上传</div>
				</div>

				<div class="taskMidFile">

					<div v-if="taskDetail.fileList.length" class="taskMidFileConter" v-for="(item,index) in taskDetail.fileList" :key="item.id">
						<div class="taskMidFileConterSon">
							<div class="taskMidFileConterSonLeft">
								<img src="../../../../assets/image/dog.png"></img>
							</div>
							<div class="taskMidFileConterSonRight">
								<div class="sonRightTop">{{item.name}}</div>
								<div class="sonRightBot">
									<div class="sonRightBotLeft">{{item.size}}</div>
									<div class="sonRightBotRight">
										<img class="sonRightBotRightImg" src="../../../../assets/image/preview.png" @click="previewFile(item.id)"></img>
										<div class="sonRightBotRightText">预览</div>
										<div class="sonRightBotRightLine"></div>
										<img class="sonRightBotRightInmage" src="../../../../assets/image/download.png" @click="downloadFile(item.id)"></img>
										<div class="sonRightBotRightText">下载</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="taskMidSecond" v-if="!putaway">
				<div class="taskMidName">
					<div class="taskMidNameLeft"></div>
					<div class="taskMidNameRight">监察建议书附件上传</div>
				</div>

				<div class="taskMidFile">
					<div v-if="taskDetail.recommendation.length" v-for="(item,index) in taskDetail.recommendation" :key="item.id">
						<div class="taskMidFileConter">
							<div class="taskMidFileConterSon">
								<div class="taskMidFileConterSonLeft">
									<img src="../../../../assets/image/dog.png"></img>
								</div>
								<div class="taskMidFileConterSonRight">
									<div class="sonRightTop">{{item.name}}</div>
									<div class="sonRightBot">
										<div class="sonRightBotLeft">{{item.size}}</div>
										<div class="sonRightBotRight">
											<img class="sonRightBotRightImg" src="../../../../assets/image/preview.png" @click="previewFile(item.id)"></img>
											<div class="sonRightBotRightText">预览</div>
											<div class="sonRightBotRightLine"></div>
											<img class="sonRightBotRightInmage" src="../../../../assets/image/download.png" @click="downloadFile(item.id)"></img>
											<div class="sonRightBotRightText">下载</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="receivingUnit">接收单位：{{item.receivingUnit}}</div>
					</div>


				</div>
			</div>

			<div class="taskBotHead" v-if="reportDetail">
				<div class="taskBotHeadTitle">
					<div class="taskBotHeadTitleText">
						—— {{reportDetail.reportTitle}} ——
					</div>
				</div>

				<div class="taskBotHeadTime">
					<div class="taskBotHeadTitleText">
						汇报时间：{{reportDetail.reportTime}}
					</div>
				</div>

				<div class="taskBotHeadText">
					<div class="taskBotHeadTextContent">
						<el-input type="textarea" readonly="true" autosize :value="reportDetail.reportContent">
						</el-input>
					</div>
				</div>

			</div>

			<div class="taskBotFoot">
				<div class="taskBotFootName">
					<div class="taskBotFootNameLeft"></div>
					<div class="taskBotFootNameRight">附件</div>
				</div>

				<div class="taskBotFootFile">
					<div v-if="reportDetail.fileList" class="taskMidFileConter" v-for="(item,index) in reportDetail.fileList" :key="item.id">
						<div class="taskMidFileConterSon">
							<div class="taskMidFileConterSonLeft">
								<img src="../../../../assets/image/dog.png"></img>
							</div>
							<div class="taskMidFileConterSonRight">
								<div class="sonRightTop">{{item.name}}</div>
								<div class="sonRightBot">
									<div class="sonRightBotLeft">{{item.size}}</div>
									<div class="sonRightBotRight">
										<img class="sonRightBotRightImg" src="../../../../assets/image/preview.png" @click="previewReportFile(item.id)"></img>
										<div class="sonRightBotRightText">预览</div>
										<div class="sonRightBotRightLine"></div>
										<img class="sonRightBotRightInmage" src="../../../../assets/image/download.png" @click="downloadReportFile(item.id)"></img>
										<div class="sonRightBotRightText">下载</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>
<script>
	import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
	import Urging from "../../../../components/Popup/Urging.vue";
	export default {
		components: {
			Breadcrumb,
			Urging
		},
		data() {
			return {

				putaway: false, //收起

				//面包靴跳转数据
				Breadcrumb: [{
					name: "监督举报",
					link: ""
				}, {
					name: "日常监督",
					link: ""
				}, {
					name: "整改汇报",
					link: ""
				}, {
					name: "汇报详情",
					link: ""
				}],



				taskDetail: {
					taskTitle: "日常监督常见通报时的标题展示",
					taskContent: "阿斯加德哈师大老客户数量短裤哈伦裤收到货了喀什东路卡还是打了卡还打了卡还是打了卡哈的脸孔哈三联快点哈流口水",

					fileList: [{
							id: 1,
							name: "举报文档信息01.PDF青蔷薇群翁群翁群翁",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						},
						{
							id: 2,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						},
						{
							id: 3,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						},
						{
							id: 4,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						},
						{
							id: 5,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						}
					],
					recommendation: [{
							id: 1,
							name: "举报文档信息01.PDF青蔷薇群翁群翁群翁",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png",
							receivingUnit: "开拓热力"
						},
						{
							id: 2,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png",
							receivingUnit: "开拓热力"
						},
						{
							id: 3,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png",
							receivingUnit: "开拓热力"
						}
					]
				},


				reportDetail: {
					reportTitle: "公司汇报任务时的汇报主题展示",
					reportTime: '2020-10-12 18:22:54',
					reportContent: "阿斯加德哈师大老客户数量短裤哈伦裤收到货了喀什东路卡还是打了卡还打了卡还是打了卡哈的脸孔哈三联快点哈流口水",
					fileList: [{
							id: 1,
							name: "举报文档信息01.PDF青蔷薇群翁群翁群翁",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						},
						{
							id: 2,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						},
						{
							id: 3,
							name: "举报文档信息01.PDF",
							size: "11.6M",
							pic: "../../../../assets/image/dog.png"
						}
					]
				}


			};
		},
		methods: {
			putAway() {
				this.putaway = !this.putaway
			},

			//任务预览
			previewFile(id) {

			},
			//任务下载
			downloadFile(id) {

			},
			//汇报预览
			previewReportFile(id) {

			},
			//汇报下载
			downloadReportFile(id) {

			},

		},
	};
</script>
<style lang="less" scoped>
	.task {
		width: 100%;
		height: 100%;

		.taskContent {

			.tableHeadAll {
				padding-top: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.tableHeadAllTop {
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 20px;

					.taskheadName {
						height: 18px;
						width: 100px;
						margin: 20px;
						display: flex;
						align-items: center;

						.taskheadNameLeft {
							width: 4px;
							height: 14px;
							background: #3D7fff;
							margin-right: 10px;
						}

						.taskheadNameRight {
							font-weight: 600;
							color: #333333;
							font-size: 16px;
							line-height: 16px;
						}
					}

					.taskheadButton {
						width: 60px;
						height: 28px;
						background: rgba(255, 255, 255, 1);
						border-radius: 4px;
						border: 1px solid rgba(61, 127, 255, 1);

						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(61, 127, 255, 1);
						line-height: 22px;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
					}
				}

				.taskTitle {
					height: 24px;
					width: 100%;
					margin-top: 24px;
					margin-bottom: 24px;
					display: flex;
					align-items: center;
					justify-content: center;

					.taskTitleText {
						height: 24px;
						width: 500px;
						text-align: center;
						color: #333333;
						font-weight: 600;
						font-size: 22px;
						line-height: 30px;
					}
				}

				.tableHeadContent {
					padding-bottom: 20px;
					background-color: #FFFFFF;


					.tableHead {
						margin: 20px;
						display: flex;
						align-items: center;
						justify-content: center;

						.tableHeadTime {
							width: 470px;
							height: 22px;
							font-size: 16px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
							line-height: 22px;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20px;
						}
					}

					.tableHeadText {
						margin-bottom: 15px;
						width: 100%;
						height: auto;
						display: flex;
						justify-content: center;

					}
				}

			}


			.taskMid {
				padding-top: 20px;
				padding-bottom: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.taskMidName {
					height: 18px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;

					.taskMidNameLeft {
						width: 4px;
						height: 14px;
						background: #3D7fff;
						margin-right: 10px;
					}

					.taskMidNameRight {
						font-weight: 600;
						color: #333333;
						font-size: 16px;
						line-height: 16px;
					}
				}

				.taskMidFile {
					margin-top: 20px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.taskMidFileConter {
						height: 80px;
						width: 360px;
						border: 1px #DDDDDD solid;
						border-radius: 4px;
						margin-right: 10px;
						margin-bottom: 10px;

						.taskMidFileConterSon {
							height: 50px;
							margin: 15px;
							display: flex;

							.taskMidFileConterSonLeft {
								height: 50px;
								width: 50px;

								img {
									height: 50px;
									width: 50px;
								}
							}

							.taskMidFileConterSonRight {
								width: 265px;
								height: 50px;
								margin-left: 15px;

								.sonRightTop {
									height: 32px;
									color: #333333;
									font-size: 16px;
									line-height: 16px;
									display: flex;
									align-items: center;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-box-orient: vertical;
								}

								.sonRightBot {
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.sonRightBotLeft {
										width: 70px;
										height: 16px;
										color: #999999;
										font-size: 14px;
										line-height: 16px;
									}

									.sonRightBotRight {
										width: 150px;
										height: 16px;
										color: #3D7FFF;
										font-size: 14px;
										line-height: 16px;
										display: flex;
										align-items: center;
										justify-content: flex-end;

										.sonRightBotRightImg {
											height: 12px;
											width: 16px;
											cursor: pointer;
										}

										.sonRightBotRightText {
											height: 16px;
											width: 30px;
											margin-left: 5px;

										}

										.sonRightBotRightLine {
											margin-left: 15px;
											margin-right: 15px;
											width: 1px;
											height: 12px;
											background: #CCCCCC;
										}

										.sonRightBotRightInmage {
											height: 12px;
											width: 14px;
											cursor: pointer;
										}

									}

								}
							}
						}
					}

				}

			}

			.taskMidSecond {
				padding-top: 20px;
				padding-bottom: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.taskMidName {
					height: 18px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;

					.taskMidNameLeft {
						width: 4px;
						height: 14px;
						background: #3D7fff;
						margin-right: 10px;
					}

					.taskMidNameRight {
						font-weight: 600;
						color: #333333;
						font-size: 16px;
						line-height: 16px;
					}
				}

				.taskMidFile {
					margin-top: 20px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.taskMidFileConter {
						height: 80px;
						width: 360px;
						border: 1px #DDDDDD solid;
						border-radius: 4px;
						margin-right: 10px;


						.taskMidFileConterSon {
							height: 50px;
							margin: 15px;
							display: flex;

							.taskMidFileConterSonLeft {
								height: 50px;
								width: 50px;

								img {
									height: 50px;
									width: 50px;
								}
							}

							.taskMidFileConterSonRight {
								width: 265px;
								height: 50px;
								margin-left: 15px;

								.sonRightTop {
									height: 32px;
									color: #333333;
									font-size: 16px;
									line-height: 16px;
									display: flex;
									align-items: center;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-box-orient: vertical;
								}

								.sonRightBot {
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.sonRightBotLeft {
										width: 70px;
										height: 16px;
										color: #999999;
										font-size: 14px;
										line-height: 16px;
									}

									.sonRightBotRight {
										width: 150px;
										height: 16px;
										color: #3D7FFF;
										font-size: 14px;
										line-height: 16px;
										display: flex;
										align-items: center;
										justify-content: flex-end;

										.sonRightBotRightImg {
											height: 12px;
											width: 16px;
											cursor: pointer;
										}

										.sonRightBotRightText {
											height: 16px;
											width: 30px;
											margin-left: 5px;

										}

										.sonRightBotRightLine {
											margin-left: 15px;
											margin-right: 15px;
											width: 1px;
											height: 12px;
											background: #CCCCCC;
										}

										.sonRightBotRightInmage {
											height: 12px;
											width: 14px;
											cursor: pointer;
										}

									}

								}
							}
						}
					}

					.receivingUnit {
						padding-left: 20px;
						padding-bottom: 20px;
					}
				}

			}


			.taskBotHead {
				padding-top: 20px;
				padding-bottom: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.taskBotHeadTitle {
					height: 24px;
					width: 100%;
					margin-top: 24px;
					margin-bottom: 24px;
					display: flex;
					align-items: center;
					justify-content: center;

					.taskBotHeadTitleText {
						height: 24px;
						width: 500px;
						text-align: center;
						color: #333333;
						font-weight: 600;
						font-size: 22px;
						line-height: 30px;
					}
				}

				.taskBotHeadTime {
					height: 22px;
					width: 100%;
					margin-top: 24px;
					margin-bottom: 24px;
					display: flex;
					align-items: center;
					justify-content: center;

					.taskBotHeadTitleText {
						width: 245px;
						height: 22px;
						font-size: 16px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						line-height: 22px;
					}
				}

				.taskBotHeadText {
					margin-bottom: 15px;
					width: 100%;
					height: auto;
					display: flex;
					justify-content: center;
				}


			}

			.taskBotFoot {
				padding-top: 20px;
				padding-bottom: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.taskBotFootName {
					height: 18px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;

					.taskBotFootNameLeft {
						width: 4px;
						height: 14px;
						background: #3D7fff;
						margin-right: 10px;
					}

					.taskBotFootNameRight {
						font-weight: 600;
						color: #333333;
						font-size: 16px;
						line-height: 16px;
					}
				}

				.taskBotFootFile {

					margin-top: 20px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.taskMidFileConter {
						height: 80px;
						width: 360px;
						border: 1px #DDDDDD solid;
						border-radius: 4px;
						margin-right: 10px;
						margin-bottom: 10px;
						;

						.taskMidFileConterSon {
							height: 50px;
							margin: 15px;
							display: flex;

							.taskMidFileConterSonLeft {
								height: 50px;
								width: 50px;

								img {
									height: 50px;
									width: 50px;
								}
							}

							.taskMidFileConterSonRight {
								width: 265px;
								height: 50px;
								margin-left: 15px;

								.sonRightTop {
									height: 32px;
									color: #333333;
									font-size: 16px;
									line-height: 16px;
									display: flex;
									align-items: center;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-box-orient: vertical;
								}

								.sonRightBot {
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.sonRightBotLeft {
										width: 70px;
										height: 16px;
										color: #999999;
										font-size: 14px;
										line-height: 16px;
									}

									.sonRightBotRight {
										width: 150px;
										height: 16px;
										color: #3D7FFF;
										font-size: 14px;
										line-height: 16px;
										display: flex;
										align-items: center;
										justify-content: flex-end;

										.sonRightBotRightImg {
											height: 12px;
											width: 16px;
											cursor: pointer;
										}

										.sonRightBotRightText {
											height: 16px;
											width: 30px;
											margin-left: 5px;

										}

										.sonRightBotRightLine {
											margin-left: 15px;
											margin-right: 15px;
											width: 1px;
											height: 12px;
											background: #CCCCCC;
										}

										.sonRightBotRightInmage {
											height: 12px;
											width: 14px;
											cursor: pointer;
										}

									}

								}
							}
						}
					}

				}


			}

		}

		/deep/.el-button--info {
			width: 60px;
			height: 28px;
			background: rgba(255, 255, 255, 1);
			border-radius: 4px;
			border: 1px solid rgba(221, 221, 221, 1);
			color: #333333;
			font-size: 14px;
			line-height: 22px;
			margin-right: 20px;
			padding: 0;


		}

		/deep/.el-button--primary {
			width: 60px;
			height: 28px;
			background: rgba(61, 127, 255, 1);
			border-radius: 4px;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 22px;
			margin-left: 20px;
			padding: 0;

		}


		/deep/.el-textarea__inner {
			width: 1080px;
			border-color: #FFFFFF;
			resize: none;

		}
	}
</style>

